<template>
  <div class="header" @click="backGo">
       <div class="header-abs" v-show="showFixed">
         <div class="iconfont icon-fanhui header-abs-back"></div>
       </div>
       <div class="header-fixed" v-show="!showFixed" :style="opacityStyle">
         <div class="header-fixed-back iconfont icon-fanhui"></div>
         <p>景点详情</p>
       </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      showFixed: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    backGo () {
      // this.$router.push({ path: '/' })
      this.$router.go(-1)
    },
    // 实现渐隐渐现效果
    handleScroll () {
      // document文档滚动的距离
      const top = document.documentElement.scrollTop
      if (top > 60 && top < 140) {
        this.opacityStyle.opacity = top / 140
        this.showFixed = false
      } else if (top > 140) {
        this.opacityStyle.opacity = 1
      } else {
        this.showFixed = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
  .header-abs
    opacity: 0.8;
    top: .2rem
    left: .2rem
    position: absolute
    width: .8rem
    height: .8rem
    line-height: .8rem
    text-align center
    background-color: #000
    border-radius 100%
    .header-abs-back
      color: #FFF
      font-size .4rem
  .header-fixed
    z-index 99
    position: fixed
    top: 0
    width: 100%
    height: .86rem
    line-height: .86rem
    background-color: #00bcd4
    text-align center
    color: #FFF
    font-size .32rem
    .header-fixed-back
      width: .64rem
      text-align center
      float: left
      font-size .4rem
</style>
